<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="26%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        :rules="rules"
    >
      <el-form-item label="登录名" prop="loginName">
        <el-input v-model="formLabelAlign.loginName"/>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="formLabelAlign.userName"/>
      </el-form-item>
      <el-form-item label="电话号码" prop="mobile">
        <el-input v-model="formLabelAlign.mobile"/>
      </el-form-item>
      <el-form-item label="用户组" prop="groupId">
        <el-select v-model="formLabelAlign.groupId" placeholder="请选择用户组">
          <el-option v-for="item in groupList" :label="item.label" :value="item.value"
                     :key="item.key"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="bottomButton">
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible=false" style="width: 47.5%;height: 100%;">取消</el-button>

    </div>
  </el-dialog>
</template>
<script>

import {isValidLoginName, isvalidPhone} from "@/utils/public";

let me;
let validPhone = (rule, value, callback) => {//验证手机号是否合法
  if (value && !isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
let validLoginName = (rule, value, callback) => {//验证登录名是否合法
  if (!value) {
    callback(new Error("请输入登录名"));
  } else if (!isValidLoginName(value)) {
    callback(new Error("登录名只支持字母、数字或_"));
  } else {
    callback();
  }
};
export default {
  name: "EditUser",
  data() {
    return {
      formTitle: '新增用户组',
      rules: {
        loginName: [
          {validator: validLoginName, required: true, trigger: "blur"}
        ],
        userName: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
        mobile: [
          {required: true, message: "请输入手机号", trigger: "blur"},
          {trigger: "blur", validator: validPhone, required: true}
        ],
        groupId: [
          {required: true, message: "请选择用户组", trigger: "change"}
        ]
      },
      formLabelAlign: {
        actionType: '',
        loginName: '',
        userName: '',
        mobile: '',
        groupId: null
      },
      groupList: [],
      centerDialogVisible: false
    }
  },
  methods: {
    showDialog(row) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.formTitle = '新增用户';
        me.formLabelAlign.actionType = 'userAdd'
        me.message = '添加成功';
        if (row) {
          me.formLabelAlign = JSON.parse(JSON.stringify(row));
          this.formTitle = '编辑用户';
          me.formLabelAlign.actionType = 'userUpdate';
          me.message = '修改成功';
        }
        this.selUserGroupOption();
      });

    },
    async selUserGroupOption() {
      let params = {
        actionType: 'userGroupDownDropList'
      }
      let response = await me.$asyncPost("userGroup", params);
      if (response.success) {
        me.groupList=response.downDropList;
      }
    },
    resetForm() {
      me.$refs.ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
          let response = await me.$asyncPost("user", me.formLabelAlign);
          if (response.success) {
            me.$message.success(me.message);
            me.$parent.selTableData();
            me.centerDialogVisible = false;
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    dialogClose() {
      this.$refs.ruleFormRef.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
    }
  }
}
</script>
<style scoped lang="scss">

</style>